<route>
    {
        meta: {
            layout: 'nepu',
            title:'论文'
        }
    }
  </route>
<template>
    <view>
        <Uploader @confirm="openUploader" proholder="上传论文"></Uploader>
        <InnerTable :data="tableData" @delete="handleDelete" @update="handleUpdate"></InnerTable>
        <a-divider></a-divider>
        <AntdZh>
            <a-pagination v-model:current="queryParams.pageNum" v-model:pageSize="queryParams.pageSize" :total="total"
                @change="getList" />
        </AntdZh>

        <!--上传 / 修改 Modal-->
        <AntdConfirmModal :title="isCreate ? '新建' : '修改'" ref="modalRef" width="800px" :keepSlot="false"
            @confirm="submitForm">
            <template #header v-if="isCreate">
                <a-row>
                    <a-col :span="2">
                        <a-tooltip title="暂存">
                            <a-button shape="circle" size="large" @click="tapStore">
                                <template #icon>
                                    <VerticalAlignBottomOutlined />
                                </template>
                            </a-button>
                        </a-tooltip>
                    </a-col>
                    <a-col :span="2">
                        <a-tooltip title="历史草稿">
                            <a-button shape="circle" size="large" @click="showDrafts">
                                <template #icon>
                                    <HistoryOutlined />
                                </template>
                            </a-button>
                        </a-tooltip>
                    </a-col>
                </a-row>
            </template>
            <a-form ref="formRef" :model="form" name="basic" :label-col="{ span: 8 }">
                <view v-if="isCreate">
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="论文标题" name="paperTitle" :rules="[{ required: true, message: '请输入论文标题' }]">
                                <a-input v-model:value="form.paperTitle" placeholder="请输入论文标题" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="DOI" name="doi" :rules="[{ required: true, message: '请输入论文DOI' }]">
                                <a-input v-model:value="form.doi" placeholder="DOI/文章编码" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="总字数" name="paperNumber" :rules="[{ required: true, message: '请输入论文总字数' }]">
                                <a-input-number v-model:value="form.paperNumber" style="width: 250px" :min="0"
                                    placeholder="请输入论文总字数" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="负责人字数" name="chargeNumber"
                                :rules="[{ required: true, message: '请输入负责人字数' }]">
                                <a-input-number v-model:value="form.chargeNumber" style="width: 250px" :min="0"
                                    placeholder="请输入负责人字数" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="期刊名称" name="journalName" :rules="[{ required: true, message: '请输入期刊名称' }]">
                                <a-input v-model:value="form.journalName" placeholder="请输入期刊名称" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="期刊级别" name="paperDictId" :rules="[{ required: true, message: '请选择论文级别' }]">
                                <DictSelect v-model:value="form.paperDictId"></DictSelect>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="署名单位" name="signatureUnit"
                                :rules="[{ required: true, message: '请输入署名单位' }]">
                                <a-input disabled v-model:value="form.signatureUnit" style="width: 250px"
                                    placeholder="请输入署名单位" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="发表时间" name="publicationDate"
                                :rules="[{ required: true, message: '请输入发表时间' }]">
                                <AntdZh>
                                    <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="form.publicationDate"
                                        placeholder="论文发表时间" style="width: 250px" />
                                </AntdZh>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="第一作者" name="firstAuthorId" :rules="[{ required: true, message: '请选择第一作者' }]"
                                v-if="radioVal == 1">
                                <LoginUserCell v-model:userId="form.firstAuthorId" v-model:nickName="form.firstAuthor">
                                </LoginUserCell>
                            </a-form-item>
                            <a-form-item label="第一作者" name="firstAuthor" :rules="[{ required: true, message: '请输入第一作者' }]"
                                v-else>
                                <!-- <a-input v-show="firstAuthorRadio === 1" v-model:value="form.firstAuthor" style="width: 200px"
                                placeholder="请输入第一作者" /> -->
                                <a-input v-model:value="form.firstAuthor" style="width: 200px" placeholder="请输入第一作者" />
                                <!-- <AntdUserSelect v-model:value="form.firstAuthorId"></AntdUserSelect> -->
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-radio-group v-model:value="radioVal" name="teacherIdentity">
                                <a-radio :value="0">学生</a-radio>
                                <a-radio :value="1">职工</a-radio>
                            </a-radio-group>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12" v-if="radioVal === 0">
                            <a-form-item label="指导教师" name="secondAuthor" :rules="[{ required: true, message: '请输入第二作者' }]">
                                <LoginUserCell v-model:userId="form.secondAuthorId" v-model:nickName="form.secondAuthor">
                                </LoginUserCell>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="上传附件">
                                <a-upload-dragger v-model:fileList="fileList" name="file" :action="url"
                                    @change="handleChange" @drop="handleDrop" :max-count="1" :headers="headerConfig">
                                    <p class="ant-upload-drag-icon">
                                        <inbox-outlined></inbox-outlined>
                                    </p>
                                    <p class="ant-upload-text">点击或者拖拽文件到此处上传</p>
                                </a-upload-dragger>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </view>
            </a-form>
        </AntdConfirmModal>
        <!--草稿列表-->
        <DraftDrawer v-if="draftShow" v-model:show="draftShow" :form.sync="form"></DraftDrawer>
        <!-- <DraftDrawer v-if="draftShow" v-model:show="draftShow" :form.sync="form" @confirm="draftConfirm"></DraftDrawer> -->
    </view>
</template>
<script setup>
// 图标引入
import { InboxOutlined, VerticalAlignBottomOutlined, HistoryOutlined } from '@ant-design/icons-vue';
// 组件 & 函数引入
import { InnerTable, DictSelect, LoginUserCell, Uploader, formDefault, createDraft, DraftDrawer, mergeWith } from './index'
// CURD
import { createOne, queryList, deleteOne } from '@/custom/nepu/api/paper';
// HOOKS
import useApp from '@/hooks'
const { $, proxy } = useApp()
// 页面参数
const radioVal = ref(1)
const modalRef = ref(null)
const formRef = ref(null)
const isCreate = ref(true)
const draftShow = ref(false)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10
})
// 表单
const form = ref(formDefault)
const total = ref(0)
const tableData = ref([])
function openUploader() {
    isCreate.value = true;
    modalRef.value.openModal()
}
// 记录删除
function handleDelete(id) {
    console.log(id)
    deleteOne(id).then(r => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        getList()
    })
}
// 修改
function handleUpdate(e) {
    form.value = e
    isCreate.value = false
    modalRef.value.openModal()
}
// 列表查询
function getList() {
    queryList(queryParams.value).then(res => {
        console.log(res)
        tableData.value = res.content;
        total.value = res.totalElements;
    })
}

// 点击暂存
function tapStore() {
    let formId = '论文'
    createDraft({
        formId,
        formJsonStr: JSON.stringify(form.value)
    }).then(r => {
        $.showToast({
            title: '暂存成功',
            icon: 'success'
        })
    })
}
// 展示草稿列表
function showDrafts() {
    //modalRef.value.closeModal();
    draftShow.value = true;
}
// 使用草稿
// function draftConfirm(item){
//     //console.log(item)
//     form.value = mergeWith(form.value,item,(value1,value2)=>{
//         if(value1 != value2){
//             return value1
//         }
//     })
//     console.log(form.value)
// }
function submitForm() {
    console.log(form.value)
    formRef.value.validateFields().then(v => {
        console.log('校验成功')
        createOne(form.value).then(res => {
            $.showToast({
                title: '创建成功',
                icon: 'success'
            })
            getList()
            form.value = formDefault;
            modalRef.value.closeModal()
        })
    }).catch(e => {
        console.log('校验失败')
    })
}
// getToken();
getList()
</script>